<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/list.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .search {
        padding: 0.5rem 0.8rem;
    }

    .search input {
        width: 100%;
        text-align: center;
        font-size: 0.6rem;
        height: 1.5rem;
        line-height: 1.5rem;
        background-color: #f8f8f8;
        color: #333;
        border-radius: 0.5rem;
    }

    .edit {
        padding: 0 0.5rem;
    }

    .edit .item {
        padding: 0.5rem 0;
        height: 2rem;
        line-height: 2rem;
        border-bottom: 1px solid #ccc;
        font-size: 0.8rem;
    }

    .edit .item span {
        font-size: 0.6rem;
        color: #ccc;
        margin-left: 0.5rem;
    }

    .edit .item .icon {
        height: 2rem;
        width: 2rem;
        float: left;
        margin: 0 0.5rem;
    }

    .edit .item .arrow {
        float: right;
        width: 0.4rem;
        height: 0.8rem;
        margin: 0.6rem 0;
    }

    .list {
        padding: 0 0.5rem;
    }

    .list .item {
        height: 3rem;
        color: #333;
        font-size: 0.7rem;
        position: relative;
        border-bottom: 1px solid #ccc;
    }

    .list .item .avatar {
        width: 2rem;
        height: 2rem;
        padding: 0.5rem;
        border-radius: 50%;
    }

    .list .item .icon_sex,
    .list .item .icon_phone {
        width: 0.5rem;
        height: 0.5rem;
    }

    .list .item .icon_phone {
        margin-left: 0.5rem;
    }

    .list .item .name {
        position: absolute;
        top: 0.5rem;
        left: 3rem;
        font-size: 0.8rem;
    }

    .list .item .tip {
        display: inline-block;
        line-height: normal;
        position: absolute;
        bottom: 0.5rem;
        padding: 0 0.3rem;
        border-radius: 10rem;
        border: 1px solid #ccc;
        font-size: 0.5rem;
        color: #666;
    }

    .list .item .time {
        position: absolute;
        right: 0;
        bottom: 0.5rem;
        font-size: 0.6rem;
        color: #888;
    }

    .list .item .time span {
        margin-left: 0.5rem;
    }

    .zhezhao {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }

    .zhezhao .main {
        width: 80%;
        margin: 0 10%;
        background-color: #fff;
        font-size: 0.8rem;
        color: #333;
        text-align: center;
        border-radius: 0.5rem;
    }

    .zhezhao .main .title {
        padding-top: 1rem;
    }

    .zhezhao .main .subtitle {
        padding: 0.6rem 0;
    }

    .zhezhao .main input {
        width: 90%;
        margin: 0 5%;
        border-radius: 0.5rem;
        text-align: center;
        background-color: #f4f4f4;
        padding: 0.5rem 0;
    }

    .zhezhao .main .submit {
        width: 90%;
        margin: 0.8rem 5%;
        background-color: #f05536;
        color: #fff;
        border-radius: 0.5rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.7rem;
    }

    .zhezhao .main .title .close {
        float: right;
        margin-right: 0.5rem;
        width: 1rem;
        height: 1rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="search">
            <input type="text" placeholder="搜索患者">
        </div>
        <div class="edit">
            <div class="item" @click="zhezhao = true">
                <img class="icon" src="../../image/icon_phone.png" alt="">
                手机号邀请患者
                <span>去填写手机号</span>
                <img class="arrow" src="../../image/arrow_right.png" alt="">
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="item in list">
                <img class="avatar" v-if="item.friendAvatar" :src="IMAGE_HTTP + item.friendAvatar" alt="">
                <img class="avatar" v-else src="../../image/user_avater.png" alt="">
                <p class="name" v-if="item.friendName">{{item.friendName}}</p>
                <p class="name" v-else>未知</p>
                <div class="tip">
                    <img class="icon_sex" v-if="item.sex == 1" src="../../image/icon_sex1.png" alt="">
                    <img class="icon_sex" v-if="item.sex == 2" src="../../image/icon_sex2.png" alt="">
                    <span class="sex" v-if="item.age">{{item.age}}岁</span>
                    <span class="sex" v-else>-岁</span>
                    <img class="icon_phone" src="../../image/icon_phoneNum.png" alt="">
                    <span class="phone" v-if="item.phone">{{item.phone}}</span>
                    <span class="phone" v-else>未填写</span>
                </div>
                <div class="time">
                    {{item.time}}
                    <!-- <span>{{item.type}}</span> -->
                </div>
            </div>
        </div>
        <div class="zhezhao" v-if="zhezhao">
            <div class="main">
                <div class="title">请填写患者手机号<img class="close" @click="zhezhao = false" src="../../image/icon_del.png"
                        alt=""></div>
                <p class="subtitle">若为该患者开过方，会自动关联</p>
                <input type="text" placeholder="在此输入手机号">
                <div class="submit" @click="zhezhao = false">确定</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../script/set_root.js"></script>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript" src="../../script/hb.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        // alert(JSON.stringify($api.getStorage("emp")))
        get_ajax("huanxin/im/list/friend", {
            userId: $api.getStorage("emp").userId
        }, function (res, err) {
            // alert(JSON.stringify(res))
            if (res.code == 2000 && res.data) {
                app.list = res.data
            } else {
                toast("没有查询到哦")
            }
        })
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            IMAGE_HTTP: IMAGE_HTTP,
            zhezhao: false,
        },
        methods: {

        },
        watch: {

        },

    })
</script>